<html>

<head>
    <title>alipay f2f example page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="//lib.baomitu.com/semantic-ui/2.2.6/semantic.min.css">
    <style>
        .body {
            font-family: "Lato,'Helvetica Neue',Arial,Helvetica,sans-serif"
        }

        .main {
            max-width: 1000px;
            margin: 72px auto;
        }

        .title {
            padding-bottom: 5px;
            border-bottom: 1px solid rgba(34, 36, 38, .15);
        }

        .top-message {
            position: fixed;
            top: 0;
            right: 0px;
            width: 100%;
            height: 60;
            z-index: 2;
            background: #fff;
            border-bottom: 1px solid rgba(34, 36, 38, .15);
            transform: translateY(-61px);
            transition: all 0.25s cubic-bezier(0.42, 0, 0, 1.8);
        }

        .top-message>div {
            max-width: 1000px;
            margin: 25 auto;
        }

        .top-message-display {
            transform: translateY(-11px);
            box-shadow: 0 1px 12px 0px #444444;
        }

        .qrcode {
            width: 150px;
            height: 150px;
        }

        @media screen and (max-width: 500px) {
            .main {
                max-width: 1000px;
                margin: 72px 15px;
                text-align: center;
            }

            .top-message>div {
                padding-left: 15px;
            }
        }
    </style>
</head>

<body>

    <div class="top-message">
        <div>
            <img width="25" height="25"
                src="">
            <span style="font-size: 19;position: relative;top: -6px;left: 5px;"></span>
        </div>
    </div>





    <div class="main">
        <!-- <h2 class="title">支付宝F2F支付测试页面</h2> -->

        <div class="ui green message" style="display:none">
            <p></p>
        </div>


        <div class="ui action input">
            <div id="createInvoiceLoading" class="ui active inverted dimmer"
                style="border-radius: 0.28571429rem;display: none">
                <div class="ui loader"></div>
            </div>
            <input type="text" id="invoiceAmount" style="display: none" value="" placeholder="请输入金额">
            <!-- <button class="ui teal right icon button" id="createInvoiceButton"> 生成支付二维码</button> -->
        </div>

        <img class="qrcode" src="">
        <button onclick="returnResult()">支付成功！</button>
    </div>

    <script src="//lib.baomitu.com/zepto/1.2.0/zepto.min.js"></script>
    <script>
        window.onload = function () {
            let a = window.location.href
            console.log('location', a)
            let aa = document.querySelector('#invoiceAmount')
            console.log('aa', aa)
            let b = a.split('?num=')[1]
            console.log('b', b)
            aa.value = b
            displayMessageBar(false);

            if ($('#invoiceAmount').val() == "") {
                // displayMessage("请填写测试金额.");
                return;
            }
            // $('#createInvoiceLoading').css("display", "");


            /* 请求创建订单 建议加上验证码 */
            $.post('/pay/createInvoice', {
                amount: $('#invoiceAmount').val()
            }, function (result) {

                $('#createInvoiceLoading').css("display", "none");

                if (result.status == false) {
                    displayMessage(result.message);
                    return;
                }

                $("img.qrcode").attr("src", "/pay/createQRCode?text=" +
                    encodeURIComponent(result.message.qrCode) + "&_=" + new Date().getTime());
                $("img.qrcode").css("display", "");


                // 开始轮询订单是否成功支付 实际使用中建议使用WebSocket */
                var intervalId = setInterval(function () {
                    checkInvoiceStatus(result.message.noInvoice, intervalId);
                }.bind(this), 2000)


            });
        }
        function returnResult() {
            window.location.href = "http://localhost:8080/person/PersonOrder"
        }


        var checking = false;
        function checkInvoiceStatus(noInvoice, intervalId) {
            if (checking) {
                return;
            }
            checking = true;
            $.post('/pay/checkInvoice', { noInvoice: noInvoice }, function (result) {
                if (result.status === true && result.message === true) {
                    displayMessageBar(true, "您成功支付了订单!")
                    $("img.qrcode").css("display", "none");
                    $('#invoiceAmount').val("");
                    clearInterval(intervalId);
                }

                checking = false;
            });
        }

        function displayMessageBar(display, message) {
            if (message != undefined) {
                $('div.ui.green.message > p').html(message);
            }
            $('div.ui.green.message').css("display", display ? "" : "none")
        }

        function displayMessage(message) {
            $('div.top-message > div > span').html(message);
            $('div.top-message').addClass("top-message-display");
            setTimeout(function () {
                $('div.top-message').removeClass("top-message-display");
            }, 1800);
        }
    </script>
</body>

</html>